<template>
  <div style="padding:20px">
    <!--块类统计-->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <h3>商品本月销量</h3>
          <div>
            <i class="el-icon-s-goods" style="color: #85cfc2"></i>
            <span>2424132</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>库存总量</h3>
          <div>
            <i class="el-icon-user-solid" style="color: #47adff"></i>
            <span>486370</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>采购金额</h3>
          <div>
            <i class="el-icon-s-flag" style="color: #faeb8e"></i>
            <span>745631￥</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <h3>成品数量</h3>
          <div>
            <i class="el-icon-star-on" style="color: #d2a9ff"></i>
            <span>358740</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--acharts统计图-->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <echarts3/>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <echarts2/>
        </el-card>
        <el-card class="box-card">
          <echarts1/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import echarts1 from './echarts1'
  import echarts2 from './echarts2'
  import echarts3 from './echarts3'

  export default {
    name: 'home',
    components: {
      echarts1,
      echarts2,
      echarts3
    }
  }
</script>

<style scoped>
  .el-card {
    margin-bottom: 20px;
    text-align: center;
  }
  .el-card:hover{
    background-color: rgba(28, 146, 255, 0.05);
  }
</style>
